<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Nj2UrnWPzNF4a3ZGIXhlWRz2AcGrDWE8"></script>
</head>
<body>
        <button onclick="map.setMapType(BMAP_EARTH_MAP)">卫星</button> 
        <button  onclick="map.setMapType(BMAP_NORMAL_MAP)">标准</button>
        <button  onclick="map.setMapType(BMAP_SATELLITE_MAP)">北斗</button>
        <div id="app" style="width:1200px;height:800px">
        </div>
        <script>
            // 初始化地图
            var map = new BMapGL.Map("app");
            // 创建一个点
            var point = new BMapGL.Point(116.404, 39.915);
            // 设置地图的中心点与缩放级别
            map.centerAndZoom(point, 14); 
            // 鼠标缩放
            map.enableScrollWheelZoom();


            // 地图控件
            var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
            map.addControl(cityCtrl);
            // 设置地图类型          
            // map.setMapType(BMAP_EARTH_MAP);  

            // 添加标注
            var marker = new BMapGL.Marker(point);        // 创建标注   
            map.addOverlay(marker);                     // 将标注添加到地图中
            // 存储所有的点
            var list = [];
            // 存储上一个标记
            var last = null;
            // 地图添加事件
            map.addEventListener("click",e=>{
                // 如果存在上一个标记，移除上一个标记
                if(last){map.removeOverlay(last)}
                // 创建一个点
                var p =new BMapGL.Point(e.latlng.lng,e.latlng.lat)
                // 创建一个标记
                var m = new BMapGL.Marker(p);
                // 地图添加标记
                map.addOverlay(m); 
                // 存储上一个标记
                last = m;
                // 把点推入list数组
                list.push(p);
            })
            // 双击绘线条
            map.addEventListener("dblclick",()=>{
                // 如果有上一个点，就移除
                if(last){map.removeOverlay(last)}
                // 把第一个点放在最后
                list.push(list[0]);
                // 绘制线条
                // var polyline = new BMapGL.Polyline(list);
                var polyline = new BMapGL.Polygon(list,{
                    // 线颜色
                    strokeColor:"blue", 
                    // 线的粗细
                    strokeWeight:2, 
                    // 线的透明度
                    strokeOpacity:0.5,
                    // 填充颜色
                    fillColor:'red',
                    // 填充透明度
                    fillOpacity:.7,
                });
                // 添加线条到地图
                map.addOverlay(polyline);
                // 清空list
                list = [];

            })

            var circle = new BMapGL.Circle(point,2000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
            map.addOverlay(circle);

        </script>
</body>
</html>